<meta name="viewport" content="width=device-width, initial-scale=1.0">
こういうhtmlがあったとする
code:html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>フォントサイズの例</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/* リセットCSSの簡略版 */
html,
body,
h1,
p {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* 内容 */
body {
font-size: 24px; /* ピクセル単位でフォントサイズを指定 */
background-color: #f0f0f0;
padding: 20px;
}
</style>
</head>
<body>
<h1>font sizeのテスト</h1>
<p>viewportを指定していないため、スマホ表示でfont sizeが小さくなる</p>
</body>
</html>
適当なReset CSSが適用されているときに、上記のviewportの設定がないとスマホ表示にしたときにfont sizeが小さくなる
https://gyazo.com/8c7bb45b0784e907ee6697355fb2850b
上記のメタタグを適用すると直る
https://gyazo.com/309b7a0d8eee032ad71fdbece8dbf587
ちなみに、initial-scaleの有無で挙動は変わらない